<template>
  <div
    class="risk-info-list"
    ref="wrapperRef"
    @mouseenter="pauseScroll"
    @mouseleave="resumeScroll"
  >
    <div class="list" ref="listRef">
      <div class="item" v-for="(item, index) in displayData" :key="index">
        <span :class="['no', item.noClass]">{{ item.no }} </span>
        <span class="title">{{ item.title }} </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from "vue";

const listRef = ref();
const wrapperRef = ref();
let scrollContainer: HTMLElement | null = null;
let animationFrameId: number;
let isPaused = false;
const speed = 0.5; // 每帧滚动的像素数，越小越慢
let scrollTop = 0;

// 复制一份数据用于循环展示
const displayData = computed(() => {
  return [...tableData, ...tableData];
});

const tableData = [
  { noClass: "no1", no: "NO.1", title: "提请关注旅检渠道走私毒品进境风险" },
  { noClass: "no2", no: "NO.2", title: "提请关注离岛免税渠道顶格购买手机风险" },
  { noClass: "no3", no: "NO.3", title: "提请关注寄递渠道大麻饼干走私风险" },
  {
    noClass: "no4",
    no: "NO.4",
    title: "提请关注近期从东南亚进境旅客携带濒危动植物及其制品风险",
  },
  { noClass: "no5", no: "NO.5", title: "近期进境旅客的登革热风险" },
  { noClass: "no6", no: "NO.6", title: "提请关注旅检渠道走私毒品进境风险" },
  { noClass: "no7", no: "NO.7", title: "提请关注旅检渠道走私毒品进境风险" },
];

onMounted(() => {
  setTimeout(() => {
    scrollContainer = wrapperRef.value?.querySelector(".list") || null;
    if (scrollContainer) {
      // 数据不足不滚动
      if (scrollContainer.scrollHeight <= scrollContainer.clientHeight * 2) {
        return;
      }
      startScroll();
    }
  }, 0);
});

onBeforeUnmount(() => {
  cancelAnimationFrame(animationFrameId);
});

function startScroll() {
  if (!scrollContainer) return;

  const maxScroll = scrollContainer.scrollHeight / 2; // 因为我们复制了一份数据，所以最大滚动到一半

  function scrollStep() {
    if (!isPaused && scrollContainer) {
      scrollTop += speed;

      // 当滚动到复制的数据部分时，无缝切换回原始数据
      if (scrollTop >= maxScroll) {
        scrollTop = 0;
        listRef.value.scrollTop = 0;
      } else {
        listRef.value.scrollTop = scrollTop;
      }
    }
    animationFrameId = requestAnimationFrame(scrollStep);
  }
  animationFrameId = requestAnimationFrame(scrollStep);
}

function pauseScroll() {
  isPaused = true;
}

function resumeScroll() {
  // 恢复时检查是否需要重置位置
  if (scrollTop >= (scrollContainer?.scrollHeight || 0) / 2) {
    scrollTop = 0;
    listRef.value.setScrollTop(0);
  }
  isPaused = false;
}
</script>

<style scoped lang="less">
.risk-info-list {
  margin-top: 9px;

  .list {
    width: 100%;
    max-height: 225px;
    height: 225px;
    overflow: auto;

    // 默认隐藏滚动条
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
      width: 0px; /* Chrome, Safari */
      height: 0px;
    }

    // 鼠标悬浮时显示滚动条
    &:hover {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }
    }
  }
  .item {
    margin-bottom: 8px;
    margin-right: 12px;
    padding: 11px 18px;
    font-size: 14px;
    border: 1px solid #fff;
    transition: transform 0.3s ease;
    &:hover {
      cursor: pointer;
      transform: scale(1.02);
    }
    .title {
      color: #4e718f;
    }
    .no {
      margin-right: 12px;
      font-weight: bold;
      color: #60829f;
      &.no1 {
        color: #ff783f;
      }
      &.no2 {
        color: #fead33;
      }
      &.no3 {
        color: #3f75ff;
      }
    }
  }
}
</style>
